<template>
	<div id="body" class="loginbackground">
		<vue-particles
			color="#409EFF"
			:particleOpacity="0.7"
			:particlesNumber="80"
			shapeType="circle"
			:particleSize="6"
			linesColor="#409EFF"
			:linesWidth="1"
			:lineLinked="true"
			:lineOpacity="0.4"
			:linesDistance="150"
			:moveSpeed="3"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="true"
			clickMode="push"
		>
		</vue-particles>

		<el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
			<div class="login-logo">
				<img src="logo.svg" width="90px" style="position: relative; right: 8px; bottom: 10px" />
			</div>
			<h3 class="loginTitle">demoXY快速开发框架</h3>
			<el-dropdown trigger="click" class="select">
				<span class="el-dropdown-link"
					>{{ currentTenant.name }}<i class="el-icon-arrow-down el-icon--right"></i
				></span>
				<el-dropdown-menu slot="dropdown">
					<div v-for="item in tenantList" :key="item.id">
						<el-dropdown-item @click.native="checked(item)">{{ item.name }}</el-dropdown-item>
					</div>
				</el-dropdown-menu>
			</el-dropdown>
			<el-form-item prop="username">
				<el-input
					prefix-icon="el-icon-user"
					type="text"
					v-model="loginForm.username"
					placeholder="请输入用户名"
				></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					show-password
					prefix-icon="el-icon-unlock"
					type="password"
					v-model="loginForm.password"
					placeholder="请输密码"
				></el-input>
			</el-form-item>
			<el-button class="loginBtn" type="primary" @click="submitForm">登录</el-button>
		</el-form>
		<Vcode :show="isShow" @success="success" @close="close"></Vcode>
	</div>
</template>
<script>
import Vcode from "vue-puzzle-vcode"
import { login } from "../../api/admin/permissions/user"
import { getMenuByRoleId } from "@/api/admin/permissions/menu"
import PermissionsRouter from "@/router/PermissionsRouter.js"
import route from "@/router/index.js"
import { mapState, mapActions } from "pinia" // 引入映射函数
import useStore from "@/store/index.js"
import { getToken, setToken } from "../../utils/auth"
import { findAllTenant } from "../../api/admin/permissions/tenant"
import { Base64 } from "js-base64"

export default {
	name: "Login",
	components: { Vcode },
	data() {
		return {
			loginForm: {
				username: "admin",
				password: "123456",
				tenantId: "",
			},
			rules: {
				username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
			roleId: "",
			isShow: false, // 验证码模态框是否出现
			tenantList: "",
			currentTenant: {
				name: "",
			},
		}
	},
	created() {
		findAllTenant({}).then((res) => {
			this.tenantList = res.data.data.records
			this.currentTenant = this.tenantList[0]
			this.loginForm.tenantId = this.tenantList[0].code
		})
		//判断是否登录过，登录状态未失效直接进入主页
		// let token = getToken();
		// if (token!=null||token!=""){
		// 	sso(token).then(res=>{
		// 		if (res.data.code==200){
		// 			this.$router.push({ name: "index" })
		// 		}
		// 	})
		// }
	},
	computed: {
		...mapState(useStore, ["menuList", "router"]),
	},
	methods: {
		...mapActions(useStore, ["changeMenu", "changeRouter"]),
		submitForm() {
			this.isShow = true
		},
		userLogin() {
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					console.log(this.loginForm)
					login(this.loginForm)
						.then((res) => {
							console.log(res)
							if (res.data.code == 200 && res.data.ok == true) {
								setToken(res.data.data.token) // 设置本地存储信息
								//设置会话存储为用户id，角色id,角色名称，用户名称
								let info = {
									userId: res.data.data.userId,
									username: res.data.data.username,
									roleId: res.data.data.roleIds,
									roleName: res.data.data.roleName,
									userFace: res.data.data.userFace,
								}
								//使用base64编码进行转码存储会话存储中，使用时再进行解码
								let jsonInfo = JSON.stringify(info)
								let encPass = Base64.encode(jsonInfo) //加密
								localStorage.setItem("userInfo", encPass)
								this.$message({
									message: "登录成功!",
									type: "success",
								})
								// let decPass=Base64.decode(encPass);//解密
								// console.log(decPass)
								const roleId = res.data.data.roleIds[0]
								return getMenuByRoleId({
									roleId: roleId,
								})
							}
							if (res.data.code == 407) {
								this.$message({
									message: res.data.message,
									type: "warning",
								})
							}
						})
						.then((res) => {
							const router = PermissionsRouter.createRoute(res.data.data)
							this.changeRouter(res.data.data)
							this.changeMenu(PermissionsRouter.menuTree(res.data.data))
							route.addRoute(router)

							this.$router.push({ name: "index" })
						})
				} else {
					this.$message({
						message: "请输入所有字段!",
						type: "warning",
					})
					return false
				}
			})
		},
		// 用户通过了验证
		success(msg) {
			this.isShow = false // 通过验证后，需要手动隐藏模态框
			this.userLogin()
		},
		// 用户点击遮罩层，应该关闭模态框
		close() {
			this.isShow = false
		},
		checked(item) {
			this.currentTenant = item
			this.loginForm.tenantId = item.code
		},
	},
}
</script>

<style lang="scss" scoped>
@import "~@/style/admin/login/login.scss";
#particles-js {
	width: 100%;
	height: calc(100% - 100px);
	position: absolute;
}
</style>
